<template>
    <!-- 选择用户的组件 -->
    <div class="contener">
        <div class="tree-page">
            <!-- 左侧树 -->
            <div class="tree-menu">
                <base-tree
                    :data="baseTreeConfig.data"
                    :loading="baseTreeConfig.loading"
                    :currentNodeKey="baseTreeConfig.currentNodeKey"
                    :filterShow="baseTreeConfig.filterShow"
                    @NodeClick="handelTreeClick"
                />
            </div>
            <!-- 页面 -->
            <div class="page">
                <!-- 表格 -->
                <div class="datas-contener">
                    <!-- 表格展示项 -->
                    <div class="table-contener">
                        <base-table
                            ref="baseTable"
                            :tableData="baseTableConfig.tableData"
                            :tableHeader="baseTableConfig.tableHeader"
                            :tableConfig="baseTableConfig.tableConfig"
                            @handleSelection="tableDataSelected"
                        >
                            <template slot-scope="{ scope }">
                                <span v-if="scope.type === 'index'">
                                    {{ scope.$index + 1 }}
                                </span>
                            </template>
                        </base-table>
                    </div>
                    <!-- 分页 -->
                    <div class="paging-contener">
                        <pagin-ation
                            :size="queryTableParams.pageSize"
                            :total="queryTableParams.total"
                            :type="queryTableParams.type"
                            :currentPage="queryTableParams.pageNo"
                            @PageNumber="pageNumberChange"
                            @PageSize="pageSizeChange"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import BaseTree from '@/components/baseTree/index'
import BaseTable from '@/components/baseTable/index'
import PaginAtion from '@/components/pagination/index'
import { deptTree } from '@/http/apis/system/dept/index'
import { userList } from '@/http/apis/system/user/index'
export default {
    components: {
        BaseTree,
        BaseTable,
        PaginAtion
    },
    data() {
        return {
            // 通用树组件配置
            baseTreeConfig: {
                // tree的数据
                data: [],
                // tree的加载状态
                loading: false,
                // tree选中的树
                currentNodeKey: '',
                // 过滤显示
                filterShow: true
            },

            // 表格配置
            baseTableConfig: {
                // 表格数据
                tableData: [],
                // 表格头数据
                tableHeader: [
                    {
                        type: 'selection',
                        width: 50,
                        fixed: 'left',
                        label: '选择',
                        visible: true
                    },
                    {
                        type: 'index',
                        label: '序号',
                        width: 50,
                        visible: true
                    },
                    {
                        prop: 'userName',
                        label: '账号名称',
                        visible: true
                    },
                    {
                        prop: 'realName',
                        label: '用户昵称',
                        visible: true
                    },
                    {
                        prop: 'phone',
                        label: '手机号码',
                        visible: true
                    },
                    {
                        prop: 'deptName',
                        label: '部门',
                        visible: true
                    },
                    {
                        prop: 'status',
                        type: 'switch',
                        label: '状态',
                        visible: true
                    },
                    {
                        prop: 'createTime',
                        label: '创建时间',
                        visible: true
                    }
                ],
                // 表格配置
                tableConfig: {
                    loading: false
                },
                // 选中的表格数据
                tableCheckedDatas: []
            },
            // 查询表格数据的参数
            queryTableParams: {
                pageNo: 0,
                pageSize: 10,
                type: 'md',
                total: 0,
                entity: {}
            }
        }
    },
    created() {
        this.queryDeptTree()
        this.queryTableData(this.queryTableParams)
    },
    methods: {
        /**
         * 查询部门树
         */
        async queryDeptTree() {
            this.baseTreeConfig.loading = true
            try {
                let res = await deptTree()
                if (res && res.data) {
                    this.baseTreeConfig.data = res.data
                } else {
                    this.baseTreeConfig.data = []
                }
                this.baseTreeConfig.loading = false
            } catch (error) {
                this.baseTreeConfig.loading = false
            }
        },
        /**
         * 树点击
         * @param {Object} params
         */
        handelTreeClick(params) {
            // 初始化查询条件
            this.initQueryParmas()
            this.baseTreeConfig.currentNodeKey = params.item.id
            // 组装查询条件
            this.queryTableParams.entity = {
                deptId: params.item.id
            }
            // 查询数据
            this.queryTableData(this.queryTableParams)
        },
        /**
         * 初始化查询参数
         */
        initQueryParmas() {
            this.queryTableParams = {
                pageNo: 0,
                pageSize: 10,
                entity: {
                    deptId: this.baseTreeConfig.currentNodeKey
                }
            }
            this.queryTableParams.pageSize = 10
            this.queryTableParams.pageNo = 1
            this.baseTableConfig.tableData = []
        },
        /**
         * 查询表格数据
         */
        async queryTableData(params) {
            this.baseTableConfig.tableConfig.loading = true
            try {
                let res = await userList(params)
                if (res.data) {
                    this.baseTableConfig.tableData = this.baseTableConfig.tableData.concat(
                        res.data.list
                    )
                    this.queryTableParams.total = res.data.totalCount
                } else {
                    this.baseTableConfig.tableData = []
                    this.queryTableParams.total = 0
                }
                this.baseTableConfig.tableConfig.loading = false
            } catch (error) {
                this.baseTableConfig.tableConfig.loading = false
            }
        },
        /**
         * 表格数据被选中
         */
        tableDataSelected(rows) {
            this.baseTableConfig.tableCheckedDatas = rows
        },
        /**
         * 页码变化
         */
        pageNumberChange(e) {
            this.queryTableParams.pageNo = e
            this.queryTableData(this.queryTableParams)
        },
        /**
         * 页大小变化
         */
        pageSizeChange(e) {
            // 页大小变化时，将当前页码设置为0
            this.queryTableParams.pageNo = 0
            // 将当前表格数据设置为空
            this.baseTableConfig.tableData = []
            this.queryTableParams.pageSize = e
            this.queryTableData(this.queryTableParams)
        },
        /**
         * 获取选中的用户
         */
        getCheckedUser() {
            return this.baseTableConfig.tableCheckedDatas
        },
        /**
         * 清空选中用户
         */
        clearCheckedUser() {
            this.$refs.baseTable.clearSelection()
        }
    }
}
</script>
<style lang="scss">
.contener {
    padding: 0;
}
</style>
